<template>
    <div>
 <!-- 顶部导航栏 satrt -->
        <topBack :title="title" />
         <!-- 顶部导航栏 end -->

<!--&lt;!&ndash; 左边 &ndash;&gt;           一种适配屏幕的像素-->
        <van-tree-select height="200vw" :items="items" :main-active-index.sync="active" @click-nav="sortDetail(items[active])" >

         <!-- 右边 -->
  <template #content >
    <div class="rightBox"  >

        <div class="boxes"  v-for="(item) in rightData" :key="item.id" >
           <img style="width: 60px;height: 60px; border-radius: 50%;" :src="$src + item.pic" alt="">
           <span>{{item.cateName}}</span> 
        </div>

    </div>
  </template>
         </van-tree-select>

        <TabBar></TabBar>
        </div>

    
</template>

<script>
    import Vue from 'vue';
    import { TreeSelect } from 'vant';
    import topBack from '@/components/topBack.vue';
    import axios from 'axios'
    import {getspfl} from "@/api/spfl";
    import TabBar from "@/components/TabBar";
    export default {
        name: "productClassify",
        components:{
            topBack,
            TabBar
        },

        created() {
           
           getspfl().then(res => {
                this.data = res.data.data
                for (let i = 0; i < res.data.data.length; i++) {
                  this.items.push({
                    text:res.data.data[i].cateName,
                    data:res.data.data[i]
                  })
                }
              this.sortDetail(this.items[0])
               
            })
           
        },
        data(){
            return {
                cateName:'',
                active: 0,
                items:[],
                data:[],
                rightData:'',
                title:'商品分类'
                // items: [{ text: '手机数码' }, { text: '家用办公' }, { text: '精品服饰' }, { text: '珠宝饰品' }, { text: '美妆护肤' }],
            };
        },
        methods:{
            // 点击左边名称渲染右边的商品列表
            sortDetail(i){
                // console.log(i.data.children);
               this.rightData = i.data.children

            },


        }
    }
</script>

<style>

    .wz2{
       display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .wz{
        padding: 0 15px;

    }
    .wz1{
    display: flex;
    flex-direction: row;
    }
    .qw img{
        margin-top: 20px;
        border-radius: 50%;
        display: flex;
        justify-content: space-around;
        width:60px;
        height: 60px;
        padding: 0 15px;
    }
    .van-tree-select__nav {

    }
    .van-tree-select__nav-item {
        border-bottom: 1px solid rgba(208, 209, 253, 0.19);
        width: 100px;
        margin-left: 15px;
    }
    .van-sidebar-item {

        background-color: #ffffff !important;

    }
    .van-tree-select__nav {
        background-color: #ffffff !important;
    }
    .spfl-wz{
        display: flex;
        justify-content: center;
        font-size: 18px;
    }
    .spfl{
        background-color: white;
        padding: 15px 0;
        border-bottom: 1px solid rgba(208, 209, 253, 0.19);

    }
    .right{
        position: absolute;
        padding: 15px 16px;
        position: absolute;
        font-size: 20px;
        color: #8aa3ef;
        right: 0;
    }
    .left{
        position: absolute;
        padding:16px;
    }
    .rightBox{
        display: flex;flex-flow: wrap;
    }
    .boxes{
        display: flex;flex-flow: wrap column;width: 33%;
    }
</style>